<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>生产追溯系统</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
      body {
        padding: 0;
        margin: 0;
      }

      #body {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .header {
        background: #2468A9;
        height: 56px;
        line-height: 56px;
        display: flex;
      }

      .headerTitle {
        padding-left: 1rem;
        font-size: 1.3rem;
        letter-spacing: 0.3em;
        color: #fff;
      }

      .menu {
        width: 150px;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 2em;
      }

      .menuItem {
        height: 3rem;
        line-height: 3rem;
        color: #333;
        padding-left: 2em;
        border-right: #fff;

      }
      .menuItem:hover{
        background-color:#2E2D3C;
        cursor: pointer;
      }

      .menuActive {
        color: #1990FF;
        background: #E6F7FF;
        border-right: 3px solid #1990FF;
      }

      #navBar {
        border-bottom: 2px solid #d9d9d9;
        margin: 20px 20px 0;
        display: flex;
        color: #666;
      }

      #navBar div {
        padding: 0em 2em 1em;
      }

      .navActive {
        color: #1990FF;
        position: relative;
      }

      .navActive:after {
        content: "";
        display: block;
        background: #1990FF;
        width: 100%;
        height: 2px;
        position: absolute;
        bottom: -2px;
        left: 0;
      }


    </style>
  </head>
  <body>
    <script src="./js/main.js" charset="utf-8"></script>
    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./js/jQuery.main.js"></script>

    <div id="body">
      <div class="header">
        <div class="headerTitle">
          FPE生产追溯系统
        </div>
        <div style="flex: 1;"></div>
        <div style="flex: 1;"></div>
        <div style="width: 25%; text-align: center;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
          您好，<span id="name" style="text-decoration:underline"></span>
          ，来自 <span id="dept" style="text-decoration:underline"></span>
          ，权限等级为 <span id="type" style="text-decoration:underline;color:#FFB800;"></span>
        </div>
        <div style="width: 80px; text-align: center; background: #d5e7ea;" class="layui-form" id="myScreen" lay-filter="myScreen" title="全屏显示">
         <i class="layui-icon" style="font-size: 30px;" id="screen" onclick="fullScreen()">&#xe622;</i>
        </div>
        <div style="background: #609BD5;width: 70px; text-align: center;color: #fff; font-size: 15px" onclick="logout()" title="退出登录">
          <i class="layui-icon" style="font-size: 30px;">&#xe682;</i>
        </div>
      </div>
      <div style="flex: 1;display: flex;">
        <div class="menu layui-bg-cyan">
        </div>
        <div style="flex: 1;display: flex;flex-direction: column;">
          <div id="navBar">

          </div>
          <iframe src="123" style="flex: 1;margin: 20px;" frameborder="0"></iframe>
        </div>
      </div>
    </div>

    <script type="text/javascript">

      window.onload=function (e) {
        if(sessionStorage.getItem('userId')==null){
          layer.msg("检测到您未登录，请先登录....")
          setTimeout(function() {
            location.href = './login.html';
          }, 1000);
        }
      }

      var selectMenu = null;
      var selectNavItem = null;
      var layer = layui.layer;
      var isFullScreen=false;

      var urlList = [{
        name: '首页',
        item: [{
          name: '报表统计',
          url: './index.html'

        },{
          name: '部门总计',
          url: './index2.html'
        }]
      },{
        name: '父级工单管理',
        item: [{
          name: '工单管理',
          url: './parentManage.html'
        },{
          name: '统计报表',
          url: './chartManage.html'
        },{
          name: '手动新增工单',
          url: './addParent.html'
        }]
      },{
        name: '报工管理',
        item: [{
          name: '管理&上报',
          url: './OrderManage.html'
        },{
          name: '上报记录',
          url: './myDone.html'
        } ,{
          name: '审核记录',
          url: './myCheck.html'
        }]
      }, {
        name: '工单追溯',
        item: [{
          name: '工单滞留查询',
          url: './retentionOrder.html'
        },{
          name: '在产数据统计',
          url: './inProduction.html'
        },{
          name: '材料批号追溯',
          url: './stuffCheck.html'

        } ,{
          name: '涉及机台追溯',
          url: './machineCheck.html'
        }]
      },{
        name: '工序管理',
        item: [{
          name: '查看工序',
          url: './processManage.html'
        }, {
          name: '新增工序',
          url: './addProcess.html'
        }]
      },{
        name: 'CPK指数',
        item: [{
          name: 'CPK计算器',
          url: './cpkCount.html'
        }, {
          name: 'CPK查询',
          url: './cpkSearch.html'
        }, {
          name: '指数报表',
          url: './cpkChart.html'
        }]
      },{
        name: '产品库',
        item: [{
          name: '产品管理',
          url: './pinManage.html'
        }, {
          name: 'CORE品名管理',
          url: './coreManage.html'
        }, {
          name: '新增产品',
          url: './addPin.html'
        }]
      },{
        name: '流程单模板管理',
        item: [{
          name: '查看流程单模板',
          url: './conditionManage.html'
        }, {
          name: '新增流程单模板',
          url: './addCondition.html'
        }]
      },{
        name:'机器管理',
        item: [{
          name:'机器型号管理',
          url: './machineInfoManage.html'
        }, {
          name:'详细机器列表',
          url: './machineManage.html'
        }, {
          name: '新增机器',
          url: './addMachine.html'
        }]
      },{
        name: '维护记录',
        url: './adminRecord.html'
      },{
        name: '用户管理',
        item: [{
          name: '用户列表',
          url: './userManage.html'
        }, {
          name: '新增用户',
          url: './addUser.html'
        }]
      },{
        name: '部门管理',
        item: [{
          name: '查看部门',
          url: './deptManage.html'
        }, {
          name: '新增部门',
          url: './addDept.html'
        }]
      },{
        name: '管理员工具',
        item: [{
          name: '管理员工具箱',
          url: './adminManage.html'
        }]
      }
      ];

      $.ajax({
        url: url + '/sys-user/getUserInfoById/'+sessionStorage.getItem('userId'),
        contentType: 'application/json',
        success: function(res) {
          $('#name').html(res.data.userName);
          $('#dept').html(res.data.deptName);
          $('#type').html(adminLevel(res.data.type));
        },
      })
      layui.use(['layer', 'element']);
      for (var i = 0; i < urlList.length; i++) {
        if(i==0){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe653;</i> "+  urlList[i].name + "</b></div>");
        }else if(i==1){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe610;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==2){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe6b2;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==3){
          $('.menu').append("<div class='menuItem ' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe615;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==4){
          $('.menu').append("<div class='menuItem ' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe62a;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==5){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe629;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==6){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe657;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==7){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe637;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==8){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe684;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==9){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe63c;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==10){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe770;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==11 ){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe68e;</i> "+  urlList[i].name + "</b></div>");
        }
        else if(i==12 ){
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe631;</i> "+  urlList[i].name + "</b></div>");
        }else{
          $('.menu').append("<div class='menuItem' onclick='switchMenu(" + i + ")'>" + "<b style='color: #d5e7ea'><i class='layui-icon'>&#xe65f;</i> "+  urlList[i].name + "</b></div>");
        }
      }

      switchMenu(0);

      function switchMenu(index) {
        if (index == selectMenu) return false;
        //没选中
        if (selectMenu != null) $('.menuItem').eq(selectMenu).removeClass('menuActive').removeClass('layui-bg-green');
        //选中
        $('.menuItem').eq(index).addClass('menuActive').addClass('layui-bg-green');
        selectMenu = index;
        if (urlList[index].item) {
          $('#navBar').empty();
          selectNav = null;
          for (var i = 0; i < urlList[index].item.length; i++) {
            $('#navBar').append("<div style='cursor: pointer' onclick='switchNav(" + i + ")'>" + urlList[index].item[i].name + "")
          }
          $('#navBar').show();
          switchNav(0);
        } else {
          $('#navBar').hide();
        }
        $('iframe').attr('src', urlList[index].url);
      }

      function switchNav(index) {
        if (index == selectNav) return false;
        $('iframe').attr('src', urlList[selectMenu].item[index].url);
        $("#navBar div").eq(selectNav).removeClass('navActive');
        $("#navBar div").eq(index).addClass('navActive');
        selectNav = index;
      }



      //监听f11
      $(document).keydown(function (event) {
        if(event.keyCode == 122 && isFullScreen == true){//全屏时退出全屏 f11
          noFullScreen();
        }
        if(event.keyCode == 122 && isFullScreen == false){//非全屏时打开全屏 f11
          fullScreen();
        }
      });



      //打开全屏
      function fullScreen() {
        var docElm = document.documentElement;
        //W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
          isFullScreen=true;
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
          isFullScreen=true;
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
          isFullScreen=true;
        }
        //IE11
        else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
          isFullScreen=true;
        }
        //改变图标
        $('#screen').html('&#xe758;');
        $('#screen').attr('onclick','noFullScreen()');
        $('#myScreen').attr('title','退出全屏');
        form.render(null, 'myScreen');

      }

      //关闭全屏
      function noFullScreen(){
        if (document.exitFullscreen) {
          document.exitFullscreen();
          isFullScreen=false;
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
          isFullScreen=false;
        }
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
          isFullScreen=false;

        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
          isFullScreen=false;
        }
        $('#screen').html('&#xe622;');
        $('#screen').attr('onclick','fullScreen()');
        $('#myScreen').attr('title','全屏显示');
        form.render(null, 'myScreen');
      }



      function logout() {
        sessionStorage.removeItem('userId');
        location.href = './login.html';
      }

    </script>
  </body>
</html>
